<template>
	<view class="promotion">
		<view class="card">
			<view class="text_box">
				<view class="">
					<h1 style="display: inline-block">{{ model1.mechanismName }}</h1>
					<img src="https://www.ainaoxingdong.com/api/an-media/images/an/static/personal/permotionManger/jigou.png"
						alt="" style="
              height: 30rpx;
              width: 26rpx;
              padding-left: 20rpx;
              font-size: 16px;
              line-height: 30rpx;
            " />
				</view>
				<h1>
					<view class="inine_block left_text"> 账户信息 </view>
					<view class="inine_block right_text">
						{{ model1.bankAccount }}
					</view>
				</h1>
				<h1>
					<view class="inine_block left_text"> 联系人 </view>
					<view class="inine_block right_text">
						{{ model1.contactsName }}
					</view>
				</h1>
				<h1>
					<view class="inine_block left_text"> 联系方式 </view>
					<view class="inine_block right_text">
						{{ model1.contactsPhone }}
					</view>
				</h1>
			</view>
		</view>
		<view class="add_promo">
			<view class="left">
				<view class="text1"> 爱心传递码 </view>
				<view class="text2">
					请将您的专属爱心传递码分发给您服务的筛查老人，以便我们能准确识别您传递的老人，并提供专属服务
				</view>
			</view>
			<view class="add_btn" @click="handleAddPromoCode()">
				立即添加<img
					src="https://www.ainaoxingdong.com/api/an-media/images/an/static/personal/permotionManger/back.png"
					alt="" style="height: 20rpx; width: 20rpx; margin-left: 10rpx" />
			</view>
		</view>
		<view class="promo_content" v-if="list.length == 0">
			<u-empty text="暂无推广码"
				icon="https://www.ainaoxingdong.com/api/an-media/images/an/static/personal/permotionManger/empty.png">
			</u-empty>
		</view>
		<!-- 有推广码 认证成功 -->
		<view class="right_success" v-else>
			<view class="code_item" v-for="item in list">
				<view class=""
					style="display: flex; justify-content;: flex-end;margin-top:40rpx;line-height:40rpx;text-align: center;">
					<view class="" style="flex: 1; text-align: left;padding-left: 40rpx;">
						<!-- {{ item.promotionCode }} -->
						{{ item.memberName }}
					</view>
				<!-- 	<view class="" style="cursor: pointer; width: 70rpx" >
						❌
					</view> -->
					<!-- <u-icon name="close" @click.native="handleDelCode(item)"></u-icon> -->
				</view>

				<img :src="baseUrl + item.promotionCodeImg" alt="" style="
            height: 250rpx;
            width: 250rpx;
            padding: 40rpx;
            padding-bottom: 0;
            padding-top: 10rpx;
          " />
				<view class="option">
					<view class="text_left" @click="handleDelCode(item)">
						删除
					</view>
					<view class="right_edit" @click="handleAddPromoCode(item)">
						编辑
					</view>
				</view>
			</view>
		</view>
		<!-- 认证成功，没有推广码得时候显示一次 -->
		<u-modal :show="firstShow" width="231" :showConfirmButton="false">
			<view class="slot-content">
				<img src="https://www.ainaoxingdong.com/api/an-media/images/an/static/personal/permotionManger/right_success.png"
					alt="" style="height: 100rpx; width: 100rpx; margin: auto" />
				<view class="text1"> 恭喜您认证成功 </view>
				<view class="text2"> 可前往添加推广码 </view>
			</view>
		</u-modal>
		<u-modal width="250" :show="delCodeShow" showCancelButton="true" confirmText="确定" cancelText="取消"
			content='您确定要删除该推广码吗' @confirm="delConfirm" @cancel="delCodeShow=false"></u-modal>
	</view>
</template>

<script>
	import {
		getQrLists,
		auditStatus,
		delCode
	} from "@/api/api.js";
	import {
		getUrl
	} from "../../../config";
	export default {
		data() {
			return {
				delCodeShow: false,
				baseUrl: getUrl(),
				// 如果是没有推广码，显示这个信息提示
				firstShow: false,
				list: [],
				model1: {},
				acitveItem: {

				}
			};
		},
		methods: {
			handleDelCode(item) {
				this.delCodeShow = true
				this.acitveItem = item
			},
			// 删除推广码
			delConfirm() {
				delCode(this.acitveItem.mechanismMemberId).then(res => {
					this.delCodeShow = false
					uni.$u.toast(res.msg)
					this.getQrList()
				})
			},
			// 添加推广码
			handleAddPromoCode(item) {
				uni.navigateTo({
					url: `/sub/personal/addCode/addCode?item=${
          item ? JSON.stringify(item) : ""
        }`,
				});
			},
			getQrList() {
				// 获取顶部数据
				auditStatus().then(
					(res) => {
						const data = res.rows[0];
						this.model1 = data;
					},
					(err) => {}
				);
				getQrLists().then((res) => {
					const {
						rows
					} = res;
					if (rows.length == 0) {
						this.list = rows;
						this.firstShow = true;
						setTimeout(() => {
							this.firstShow = false;
						}, 1500);
					} else {
						this.list = rows;
					}
				});
			},
		},
		onShow() {
			this.getQrList();
		},
		onLoad() {
			this.getQrList();
		},
	};
</script>

<style lang="scss">
	page {
		// background-color: #eee;
		height: 100vh;
	}

	.promotion {
		padding-top: 60rpx;
		background-image: url("https://www.ainaoxingdong.com/api/an-media/images/an/static/personal/permotionManger/tuiguangbg.png");
		background-position: left top;
		background-size: 100% 100%;
		background-repeat: no-repeat;

		.card {
			width: 690rpx;
			height: 260rpx;
			background-color: #fdfffe;
			background: #ffffff;
			box-shadow: 4px 6px 18px 0px rgba(31, 90, 102, 0.1);
			border-radius: 20rpx;
			margin: auto;
			background-image: url("https://www.ainaoxingdong.com/api/an-media/images/an/static/personal/permotionManger/aixinbg.png");
			background-position: bottom right;
			background-repeat: no-repeat;
		}

		.inine_block {
			display: inline-block;
		}

		.text_box {
			padding-left: 30rpx;
			padding-top: 30rpx;
			padding-bottom: 30rpx;

			h1 {
				font-size: 32rpx;
				line-height: 44rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #004751;
				height: 48rpx;
			}

			.u-icon {
				display: inline-block;
			}

			.left_text {
				width: 96rpx;
				height: 34rpx;
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #4e5969;
				line-height: 34rpx;
				padding-right: 40rpx;
				margin-top: 24rpx;
			}

			.right_text {
				height: 34rpx;
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #4e5969;
				line-height: 34rpx;
				margin-top: 24rpx;
			}
		}

		.add_promo {
			background-color: #fff;
			margin-top: 20rpx;
			margin-left: 30rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 690rpx;
			// height: 128rpx;
			background: #ffffff;
			box-shadow: 4px 6px 18px 0px rgba(31, 90, 102, 0.1);
			border-radius: 20rpx;

			.left {
				padding-left: 40rpx;
				width: 370rpx;

				.text1 {
					font-size: 28rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 520;
					color: #004751;
					line-height: 40rpx;
					padding-top: 40rpx;
					padding-bottom: 10rpx;
				}

				.text2 {
					font-size: 20rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #a1b0b3;
					line-height: 28rpx;
					padding-bottom: 40rpx;
				}
			}

			.add_btn {
				width: 216rpx;
				height: 72rpx;
				background: #66ffb5;
				border-radius: 18px;
				text-align: center;
				line-height: 72rpx;
				margin-right: 40rpx;
				text-align: center;

				font-size: 12px;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #004751;
			}
		}

		.promo_content {
			margin-top: 300rpx;
		}

		.slot-content {
			text-align: center;

			.u-icon {
				margin-left: 45rpx;
			}

			.text1 {
				font-size: 16px;
				color: #004751;
				line-height: 19px;
				text-align: center;
				margin-top: 30rpx;
				margin-bottom: 8rpx;
			}

			.text2 {
				font-size: 12px;
				color: #336c74;
				text-align: center;
				margin: 0;
				margin-bottom: 20rpx;
			}
		}

		.right_success {
			display: flex;
			justify-content: flex-start;
			flex-wrap: wrap;
			// padding-left: 30rpx;
			// padding-right: 30rpx;
			.code_item {
				// flex: 1;
				width: 315rpx;
				// height: 380rpx;
				background: #ffffff;
				box-shadow: 4px 6px 18px 0px rgba(31, 90, 102, 0.1);
				border-radius: 20rpx;
				margin: 40rpx 30rpx;
				margin-bottom: 0;

				.u-icon {
					flex-direction: row;
					align-items: center;
					justify-content: flex-end;
					margin-right: 20rpx;
					margin-top: 20rpx;
				}

				.option {
					display: flex;
					margin-left: 40rpx;
					margin-right: 40rpx;
					padding-bottom: 20rpx;
					justify-content: space-between;
					// height: 90rpx;
					// line-height: 90rpx;

					.text_left {
						font-size: 14px;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #B8C0CC;
						width: 160rpx;
						overflow: hidden;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}

					.right_edit {
						font-size: 14px;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #00cc6a;
					}
				}
			}

			// &:nth-child(2n + 1) {
			// 	margin-right: 20rpx;
			// }

			// &:nth-child(2n) {
			// 	margin-left: 20rpx;
			// }
		}
	}
</style>
